<template>

  <div class="box">
    <div class="box-main">
      <!-- <div style="boder-bottom:1px solid #ccc;margin:8px" >随机生成数字</div>
      <div style="display:flex;flex-wrap: wrap;">
          <p v-for="(item,index) in  ceshi " :key="index" style="margin:8px">{{item}}</p>
      </div> -->

      <el-button type="primary" v-if="isdis==false" @click="sj" icon="el-icon-refresh">随机</el-button>

      <div v-for="(item,index) in list1" :key="index">
        <img width="50" height="50" :src="item.img" @click="xm(item.img)">
      </div>
      <!-- <input v-for="(item,index) in list1" :key="index" @click="xm(item.name)" :disabled='isdis' readonly :value="item.name"></input> -->
      <el-button v-if="isdis==true" type="primary" @click="cl" icon="el-icon-refresh">重新开始</el-button>
    </div>
    <div class="footer">

      <div v-for="(item,index) in xfList" :key="index">
        <img width="50" height="50" :src="item.name" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { Form } from 'element-ui'
import { set } from 'vue'
export default {
  name: 'App',
  data() {
    return {
      ceshi: [],
      xfList: [],
      // imgList:new Array(10).fill().map((v,i)=>{
      //   return {name:'张三'+i,t}
      // }),
      SearchVal: '',
      isdis: false,
      id: 1,
      obj: {
        "机构个人信息": [
          {
            name: '张三',
            age: '20'
          },
          {
            name: '张三',
            age: '20'
          },
          {
            name: '张三',
            age: '20'
          },
        ],
        "恋爱情况": [
          {
            name: '张三',
            age: '20'
          },
          {
            name: '张三',
            age: '20'
          }
        ]
      },
      imgList: [
        'https://img0.baidu.com/it/u=51750889,1789768003&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664384400&t=aff1520dd2af358e57c4ecc603169bef',
        'https://img1.baidu.com/it/u=592570905,1313515675&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664384400&t=a33b36eebd79094f55ad413c6d999eef',
        'https://img2.baidu.com/it/u=3898105799,10437040&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664384400&t=e14d8735079098d8bd3502258444dd9f',
        'https://img1.baidu.com/it/u=2427580660,2037836456&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664384400&t=1990c4463bcead102f4525421875ceb7',
        'https://img2.baidu.com/it/u=3684117954,695988885&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664384400&t=78e77c76a2f1d679df5646d18b11896d',
        'https://img0.baidu.com/it/u=51750889,1789768003&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664384400&t=aff1520dd2af358e57c4ecc603169bef'
      ],
      list: new Array(50).fill({}),
      list1: new Array(50).fill({})

      // list1: [一级, 二级, 三级]
    }
  },
  created() {
    // 初始化图片列表
    this.list = this.list.map(v => {
      return { img: this.imgList[Math.floor(Math.random() * 5)] }
    })
    this.list1 = this.list1.map(v => {
      return { img: this.imgList[Math.floor(Math.random() * 5)] }
    })

  },
  mounted() {
    let MathName = ['你', '真', '帅']
    // 初始化图片列表随机
    this.list1.sort(function () {
      return (0.5 - Math.random());
    });
    // demo案列仅供参考
    //1.10个随机数求和，平均数，最大值，最小值
    // const numList = []
    // for (let i = 0; i < 10; i++) {
    //   let num = Math.floor(Math.random() * (1000 - 10) + 10)
    //   numList.push(num)
    // }
    // if (this.ceshi.length > 150) {
    //   clearInterval(timer)
    // }
    // let total = 0
    // numList.reduce((num1, num2) => {
    //   return total = num1 + num2
    // })
    // console.log('总数为' + total, '平均数为' + (total / numList.length).toFixed(2), '最大值为' + Math.max(...numList), '最小值为' + Math.min(...numList));

    // 3个随机数总和为520
    // var arr = new Array(3).fill(0)
    // for (var i = 0; i < 520; i++) {
    //   var num = parseInt(Math.random() * 3)
    //   arr[num]++
    // }
    // console.log(arr);
    // axios请求并发
    // let a = axios.get('https://www.fastmock.site/mock/cf1391a7db80afafeaf76a525e791522/develpoment/api/route')
    // let b = axios.get('https://www.fastmock.site/mock/cf1391a7db80afafeaf76a525e791522/develpoment/api/userList')
    // let reqArr = [a, b]
    // axios.all(reqArr).then(axios.spread((res) => {
    //   console.log('结果1', first)
    //   console.log('结果2', second)
    // }))
    // promise并发请求
    // var ceshi = []
    // var bb = new Array(6).fill(0).map((v, i) => {
    //   let p1 = new Promise((resolve, reject) => {
    //     let p1Data = i % 2 == 0 ? axios.get('https://www.fastmock.site/mock/cf1391a7db80afafeaf76a525e791522/develpoment/api/route') : axios.get('https://www.fastmock.site/mock/cf1391a7db80afafeaf76a525e791522/develpoment/api/rou')
    //     resolve(p1Data)
    //   }).catch(err => {
    //     //  Promise.resolve('失败了')
    //   })
    //   ceshi.push(p1)
    // })
    // Promise.all(ceshi).then((result) => {
    //   console.log(result);
    //   var sucess = []
    //   var fail = []
    //   result.forEach(r => {
    //     if (r.data.code == 200) {
    //       sucess.push(r)
    //     } else {
    //       fail.push(r)
    //     }
    //   })
    //   this.$message.error(`有${fail.length}个数据传输失败`);
    //   setTimeout(() => {
    //     this.$message.success(`有${sucess.length}传输成功`)
    //   }, 2000)
    // }).catch((error) => {
    //   // console.log(error, '失败的promise+++')
    // })
    // // 





    // 获取随机数，toFixed为四舍五入保留小数，0为保留整数，范围～1000
    // const getRandom = () => +(Math.random() * 1000).toFixed(0);

    // const asyncTask = (taskID) => new Promise((resolve) => {
    //   // 随机获取一次0~1000的随机数
    //   let timeout = getRandom();
    //   // 打印出传递进来的ID号 taskID=1 start.
    //   console.log(`taskID=${taskID} start.`);
    //   // 设置计时时间，function()等价于 () => {...}
    //   setTimeout(function () {
    //     // 打印出执行的taskID,和timeout
    //     console.log(`taskID=${taskID} finished in time=${timeout}.`);
    //     // 异步成功执行
    //     resolve(taskID)
    //   }, timeout);
    // });

    // Promise.all([asyncTask(1), asyncTask(2), asyncTask(3)])
    //   .then(resultList => {
    //     console.log('results:', resultList);
    //   });

  },



  methods: {
    sj() {
      this.list1.sort(function () {
        return (0.5 - Math.random());
      });
    },
    cl() {
      this.xfList = []
      this.list1 = this.list

    },
    // 重复
    duplicates(arr) {
      let temp = []
      arr.forEach(item => {
        if (arr.indexOf(item) != arr.lastIndexOf(item) && temp.indexOf(item) == -1) {
          temp.push(item);
        }
      })
      return temp
    },
    xm(name) {
      this.xfList.push({ name: name })
      let index = this.list1.findIndex(r => r.img == name)
      this.list1.splice(index, 1)
      var count = 0
      this.xfList.forEach(r => {
        if (r.name === name) {
          count = count + 1
        }
      })
      if (count == 3) {
        var b = this.duplicates(this.xfList.map(r => r.name))
        var newname=b.filter(r=>r==name)
        this.xfList = this.xfList.filter(r => r.name!=newname )
        // var newlist=[]
        // this.xfList.forEach(r=>{
        //   b.forEach(v=>{
        //     if(r.name==v){
        //       newlist.push(r)
        //       console.log(newlist);
        //       // this.xfList.filter(r=>)
        //     }
        //   })
        // })

        // console.log(this.xfList);
        // if(this.xfList)
        // if(b[0]&&!b[1]){
        //    
        // }
        // if(b[0]&&b[1]){
        //      this.xfList = this.xfList.filter(r => r.name != b[1])
        // }

      }
      if (this.xfList.length > 9) {
        alert('你无了')
        this.isdis = true
      }
      this.xfList1 = this.xfList

      // console.log(this.xfList);
    },
    bb(id) {
      console.log(id);

    },
    cl() {
      this.xfList = []
      this.list = this.list1
      this.isdis = false
    },
    duplicates(arr) {
      let temp = []
      arr.forEach(item => {
        if (arr.indexOf(item) != arr.lastIndexOf(item) && temp.indexOf(item) == -1) {
          temp.push(item);
        }
      })
      return temp
    },

    highlight(str) {
      //RegExp 是正则表达式的构造函数 
      //参数1:字符串
      //参数2:匹配模式
      //返回值:正则对象
      // new RegExp(this.searchValue,'gi') 
      return str.replaceAll(this.SearchVal, `<span style='color:red'>${this.SearchVal}</span>`
      )
    },
    Search() {
      this.SearchVal == '' ? this.list1 = [] : this.list1 = this.list.filter(r => r.name.includes(this.SearchVal))

      console.log(this.list1);
    }
  },
}
</script>
<style scoped lang='scss'>
.box {
  display: flex;
  flex-direction: column;
  border: solid;
  width: 100%;
  height: calc(100% - 20px);
  .box-main {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    height: 80%;
    border: solid;
    img {
      cursor: pointer;
      margin: 10px;
    }
    .img {
      position: absolute;
      left: 135px;
      z-index: 99;
    }
    // input {
    //   cursor: pointer;
    //   margin: 10px;
    //   width: 50px;
    //   height: 50px;
    //   border: 1px solid black;
    //   text-align: center;
    //   line-height: 50px;
    // }
  }
  .footer {
    border-top: 1px solid black;
    flex: 1;
    display: flex;

    div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 11%;
      border-right: 1px solid black;
    }
  }
}
</style>